<template>
  <div class="divBox" style="padding-bottom:0;">
    <el-row :gutter="20" class="baseInfo">
        <div @click="skip1">
        <el-col v-bind="grid" class="ivu-mb">
          <el-card :bordered="false" dis-hover :padding="12">
            <div  class="acea-row row-between-wrapper">
              <div class="acea-row align-center">
                <!-- <div class="main_badge">
                  <span class="iconfont iconxinzengyonghu"></span>
                </div> -->
                <span class="main_tit">科普宣教</span>
              </div>
              <!--            <el-tag type="primary">今日</el-tag>-->
            </div>
            <div class="content" v-if="viewData">
              <span class="content-number spBlock my15">{{ viewData.popularScienceCount }}</span>
              <!--            <el-divider></el-divider>-->
              <!--            <div class="acea-row row-between-wrapper">-->
              <!--              <span class="content-time">昨日数据</span>-->
              <!--              <span class="content-time">{{ viewData.yesterdayAddUserCount }}2 人</span>-->
              <!--            </div>-->
            </div>
          </el-card>
        </el-col>
        </div>
        <div @click="skip2">
          <el-col v-bind="grid" class="ivu-mb">
            <el-card :bordered="false" dis-hover :padding="12" >
              <div  class="acea-row row-between-wrapper">
                <div class="acea-row align-center">
                  <!-- <div class="main_badge">
                    <span class="iconfont iconxiaoshoue"></span>
                  </div> -->
                  <span class="main_tit" >紧急联系</span>
                </div>
                <!--            <el-tag type="primary">今日</el-tag>-->
              </div>
              <div class="content" v-if="viewData">
                <span class="content-number spBlock my15">{{ viewData. emergentContactCount}}</span>
                <!--            <el-divider></el-divider>-->
                <!--            <div class="acea-row row-between-wrapper">-->
                <!--              <span class="content-time">昨日数据</span>-->
                <!--              <span class="content-time">{{viewData.yesterdayFormCount}}12 个</span>-->
                <!--            </div>-->
              </div>
            </el-card>
          </el-col>
        </div>
      <div @click="skip3">
        <el-col v-bind="grid" class="ivu-mb">
          <el-card :bordered="false" dis-hover :padding="12">
            <div  class="acea-row row-between-wrapper">
              <div class="acea-row align-center">
                <!-- <div class="main_badge">
                  <span class="iconfont iconxiaoshoue"></span>
                </div> -->
                <span class="main_tit">野生动物观察记录</span>
              </div>
              <!--            <el-tag type="primary">今日</el-tag>-->
            </div>
            <div class="content" v-if="viewData">
              <span class="content-number spBlock my15">{{ viewData.animalRecordCount }}</span>
              <!--            <el-divider></el-divider>-->
              <!--            <div class="acea-row row-between-wrapper">-->
              <!--              <span class="content-time">昨日数据</span>-->
              <!--              <span class="content-time">{{viewData.yesterdayRegisterCount}}1 个</span>-->
              <!--            </div>-->
            </div>
          </el-card>
        </el-col>
      </div >
      <div @click="skip4">
        <el-col v-bind="grid" class="ivu-mb">
          <el-card :bordered="false" dis-hover :padding="12">
            <div  class="acea-row row-between-wrapper">
              <div class="acea-row align-center">
                <!-- <div class="main_badge">
                  <span class="iconfont iconxiaoshoue"></span>
                </div> -->
                <span class="main_tit">野生动物救助</span>
              </div>
              <!--            <el-tag type="primary">今日</el-tag>-->
            </div>
            <div class="content" v-if="viewData">
              <span class="content-number spBlock my15">{{ viewData.animalRescueCount }}</span>
              <!--            <el-divider></el-divider>-->
              <!--            <div class="acea-row row-between-wrapper">-->
              <!--              <span class="content-time">昨日数据</span>-->
              <!--              <span class="content-time">{{viewData.yesterdayRegisterCount}}1 个</span>-->
              <!--            </div>-->
            </div>
          </el-card>
        </el-col>
      </div >
      <div @click="skip5">
        <el-col v-bind="grid" class="ivu-mb">
          <el-card :bordered="false" dis-hover :padding="12">
            <div  class="acea-row row-between-wrapper">
              <div class="acea-row align-center">
                <!-- <div class="main_badge">
                  <span class="iconfont iconxiaoshoue"></span>
                </div> -->
                <span class="main_tit">报灾管理</span>
              </div>
              <!--            <el-tag type="primary">今日</el-tag>-->
            </div>
            <div class="content" v-if="viewData">
              <span class="content-number spBlock my15">{{ viewData.disasterReportingCount }}</span>
              <!--            <el-divider></el-divider>-->
              <!--            <div class="acea-row row-between-wrapper">-->
              <!--              <span class="content-time">昨日数据</span>-->
              <!--              <span class="content-time">{{viewData.yesterdayRegisterCount}}1 个</span>-->
              <!--            </div>-->
            </div>
          </el-card>
        </el-col>
      </div>
      <div @click="skip6">
        <el-col v-bind="grid" class="ivu-mb">
          <el-card :bordered="false" dis-hover :padding="12">
            <div  class="acea-row row-between-wrapper">
              <div class="acea-row align-center">
                <!-- <div class="main_badge">
                  <span class="iconfont iconxiaoshoue"></span>
                </div> -->
                <span class="main_tit">用户数量</span>
              </div>
              <!--            <el-tag type="primary">今日</el-tag>-->
            </div>
            <div class="content" v-if="viewData">
              <span class="content-number spBlock my15">{{ viewData.userCount }}</span>
              <!--            <el-divider></el-divider>-->
              <!--            <div class="acea-row row-between-wrapper">-->
              <!--              <span class="content-time">昨日数据</span>-->
              <!--              <span class="content-time">{{viewData.yesterdayRegisterCount}}1 个</span>-->
              <!--            </div>-->
            </div>
          </el-card>
        </el-col>
      </div>

<!--      <div v-if="viewData.roles==1">-->
<!--        <el-col v-bind="grid" class="ivu-mb">-->
<!--          <el-card :bordered="false" dis-hover :padding="12">-->
<!--            <div  class="acea-row row-between-wrapper">-->
<!--              <div class="acea-row align-center">-->
<!--                &lt;!&ndash; <div class="main_badge">-->
<!--                  <span class="iconfont iconyonghu"></span>-->
<!--                </div> &ndash;&gt;-->
<!--                <span class="main_tit">野生动物救助</span>-->
<!--              </div>-->
<!--              &lt;!&ndash;            <el-tag type="primary">今日</el-tag>&ndash;&gt;-->
<!--            </div>-->
<!--            <div class="content" v-if="viewData">-->
<!--              <span class="content-number spBlock my15">{{ viewData.userCount }}</span>-->
<!--              &lt;!&ndash;            <el-divider></el-divider>&ndash;&gt;-->
<!--              &lt;!&ndash;            <div class="acea-row row-between-wrapper">&ndash;&gt;-->
<!--              &lt;!&ndash;              <span class="content-time">昨日数据</span>&ndash;&gt;-->
<!--              &lt;!&ndash;              <span class="content-time">{{ viewData.yesterdayUserVisitCount }}2</span>&ndash;&gt;-->
<!--              &lt;!&ndash;            </div>&ndash;&gt;-->
<!--            </div>-->
<!--          </el-card>-->
<!--        </el-col>-->
<!--      </div>-->
<!--      <div @click="skip2"  v-if="viewData.roles==1">-->

<!--        <el-col v-bind="grid" class="ivu-mb">-->
<!--          <el-card :bordered="false" dis-hover :padding="12">-->
<!--            <div  class="acea-row row-between-wrapper">-->
<!--              <div class="acea-row align-center">-->
<!--                &lt;!&ndash; <div class="main_badge">-->
<!--                  <span class="iconfont iconxinzengyonghu"></span>-->
<!--                </div> &ndash;&gt;-->
<!--                <span class="main_tit">用户总数</span>-->
<!--              </div>-->
<!--              &lt;!&ndash;            <el-tag type="primary">今日</el-tag>&ndash;&gt;-->
<!--            </div>-->
<!--            <div class="content" v-if="viewData">-->
<!--              <span class="content-number spBlock my15">{{ viewData.userAllCount }}</span>-->
<!--              &lt;!&ndash;            <el-divider></el-divider>&ndash;&gt;-->
<!--              &lt;!&ndash;            <div class="acea-row row-between-wrapper">&ndash;&gt;-->
<!--              &lt;!&ndash;              <span class="content-time">昨日数据</span>&ndash;&gt;-->
<!--              &lt;!&ndash;              <span class="content-time">{{ viewData.yesterdayAddUserCount }}2 人</span>&ndash;&gt;-->
<!--              &lt;!&ndash;            </div>&ndash;&gt;-->
<!--            </div>-->
<!--          </el-card>-->
<!--        </el-col>-->
<!--      </div>-->

    </el-row>
  </div>
</template>
<script>
import { getUserCensusApi, selectNoGreenLightListApi, viewModelApi } from '@/api/dashboard'
  export default {
    data() {
      return {
        grid: { xl: 4, lg: 4, md: 4, sm: 4, xs: 4},
        viewData:{},
        viewData1:{},
        filtrate:10,
      }
    },
    methods: {

      skip1(){
        this.$router.push({name: 'News',})
      },
      skip2(){
        this.$router.push({name: 'Emergency',})
      },
      skip3(){
        this.$router.push({name: 'Record'})
      },
      skip4(){
        this.$router.push({name: 'Salvation',})
      },
      skip5(){
        this.$router.push({name: 'Disaster',})
      },
      skip6(){
        this.$router.push({name: 'User',})
      },
      //数据统计
      statisticsOrder() {
        viewModelApi().then(async res => {
        //后期接口调用
         this.viewData = res;
        })
      },
      getUserCensus() {
        getUserCensusApi().then(async res => {
          //后期接口调用
          this.viewData1 = res;
        })
      },
    },
    mounted() {
      this.statisticsOrder();
      // this.getUserCensus()
    }
  }
</script>
<style scoped lang="scss">
  ::v-deep{
    .el-col-xl-6{
      width: 20%;
    }
  }
  .ivu-mb{
    margin-bottom: 20px;
  }
  .up, .el-icon-caret-top {
    color: #F5222D;
    font-size: 12px;
    opacity: 1 !important;
  }

  .down, .el-icon-caret-bottom {
    color: #39C15B;
    font-size: 12px;
    /*opacity: 100% !important;*/
  }
  .main_tit{
    color: #333;
    font-size: 14px;
    font-weight: 500;
  }
  .content-time{
    font-size: 14px;
    color:#333;
    font-weight: 500;
  }
  .main_badge{
    width: 30px;
    height: 30px;
    border-radius: 5px;
    margin-right: 10px;
    background: #2C90FF;
    color: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .my15{
    margin: 15px 0 15px;
  }
  .align-center{
    align-items: center;
  }
  .baseInfo {
    ::v-deep .el-card__header {
      padding: 15px 20px !important;
    }
  }

  .content {
    &-number {
      font-size: 30px;
      font-weight: 600;
      font-family: PingFangSC-Semibold, PingFang SC;
      color: #333;
    }
    &-time{
      font-size:14px;
      color: #333333;
      font-weight: 400;
    }
  }
</style>
